<template>
	<!--标签云-->
	<div class="ui segments m-box">
		<div class="ui secondary segment"><i class="tags icon"></i>标签</div>
		<div class="ui red segment m-padding-small">
			<router-link :to="`/tag/${tag.name}`" class="ui label m-text-500 tag-item" :class="tag.color" v-for="(tag,index) in tagList" :key="index">
				{{ tag.name }}
			</router-link>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Tags",
		props: {
			tagList: {
				type: Array,
				required: true
			},
		},
	}
</script>

<style scoped>
	.secondary.segment {
		padding: 10px;
	}

	.m-padding-small {
		padding: 7px;
	}

	.label {
		margin: 3px !important;
	}
  
  .tag-item:hover {
    transform: scale(1.2); /* 当鼠标悬浮时，对元素进行放大操作（此处放大比例为原来的1.2倍）*/
    box-shadow: 0px 0px 5px rgba(0, 68, 85, 0.3); /* 添加阴影效果 */
  }
</style>